<!--
* @author wn
* @date 2022/10/11 15:08:39
* @description: 左侧 菜单 组件  el-menu 右侧有一条边框
unique-opened true  只保持一个 menu 的展开
default-openeds   为默认打开的 sub-menu 的 index 的数组
!-->
<template>
	<el-menu
		class="el-menu-vertical"
		v-if="noChildren"
		background-color="#545c64"
		text-color="#fff"
		:default-active="$route.path"
		active-text-color="#ffd04b"
		:default-openeds="[hasChildren[0].path]"
		:collapse="isCollapse"
		router
	>
		<!-- :collapse="$store.state.common.isCollapse" -->
		<div class="hide">
			<el-icon v-if="isCollapse" :size="22">
				<i-ep-Tools style="margin-right: 0.2133rem" />
			</el-icon>
			<span v-else>后台管理</span>
		</div>
		<el-menu-item
			:index="item.path"
			v-for="item in noChildren"
			:key="item.path"
			@click="itemClick(item)"
		>
			<el-icon>
				<component :is="item.icon" style="margin-right: 0.2133rem" />
			</el-icon>
			<span>{{ item.label }}</span>
		</el-menu-item>
		<el-sub-menu
			:index="item.path"
			v-for="item in hasChildren"
			:key="item.path"
		>
			<template #title>
				<el-icon>
					<component :is="item.icon" style="margin-right: 0.2133rem" />
				</el-icon>
				<span>{{ item.label }}</span>
			</template>
			<el-menu-item-group
				v-for="subItem in item.children"
				:key="subItem.title"
				:title="subItem.title"
			>
				<el-menu-item
					v-for="sub in subItem.obj"
					:key="sub.path"
					:index="sub.path"
					@click="itemClick(sub)"
				>
					<el-icon>
						<component :is="sub.icon" style="margin-right: 0.2133rem" />
					</el-icon>
					<span>{{ sub.label }}</span>
				</el-menu-item>
			</el-menu-item-group>
		</el-sub-menu>
	</el-menu>
	<div v-else class="skeleton"></div>
</template>
<script>
// constants 导入数据 asideList   vuex 中 获取  代替
import emitter from '@/utils/mitt'
import {
	HomeFilled,
	User,
	FolderChecked,
	VideoPlay,
	Headset,
	Shop,
	Tools,
} from '@element-plus/icons-vue'
import { onUnmounted, ref } from 'vue'
import { useStore } from 'vuex'

export default {
	components: {
		HomeFilled,
		User,
		FolderChecked,
		VideoPlay,
		Headset,
		Shop,
		Tools,
	},
	setup() {
		const store = useStore()
		const hasChildren = ref(null)
		const noChildren = ref(null)

		// vuex 获取 左侧  Menu
		const result = store.state.common.menuList
		// 筛选出 有分组 和 没有分组的 数据
		hasChildren.value = result.filter(item => item.children)
		noChildren.value = result.filter(item => !item.children)
		// emitter  获取 isCollapse
		const isCollapse = ref(false)
		const CollapseFn = data => (isCollapse.value = data)
		emitter.on('setCollapse', CollapseFn)
		onUnmounted(() => emitter.off('setCollapse', CollapseFn))

		// menu 点击事件  1 emitter 无法持久化  2 Vuex  修改面包屑  3 修改 tags
		const itemClick = ({ path, label, name, icon }) => {
			store.commit('common/setBreadcrumb', { path, label })
			store.commit('common/setTabsList', { path, label, name, icon })
		}

		return {
			hasChildren,
			noChildren,
			isCollapse,
			itemClick,
		}
	},
}
</script>
<style scoped lang="scss">
.el-menu-vertical {
	// 重要以下就是添加menu的宽度和高度。
	min-height: calc(100vh);
	border-right: none;
	.hide {
		height: 61px;
		line-height: 61px;
		text-align: center;
		color: rgb(255, 255, 255);
		font-size: 16px;
		font-weight: 700;
		border-bottom: 0.0267rem solid;
	}
	&:not(.el-menu--collapse) {
		// 重要以下就是添加menu的宽度和高度。
		width: 200px;
	}
}
.skeleton {
	width: 200px;
	min-height: calc(100vh);
	background-color: #545c64;
}
</style>
